<template>
  <div class="play-con">
    <div class="songInfo" v-if="deail">
      <div class="title">{{ deail.name }}</div>

      <div class="artists" v-if="deail.ar">{{ deail.ar[0].name }}</div>

      <div class="main">
        <div class="cover" v-if="deail.al"><img :src="deail.al.picUrl + '?param=200y200'" :class="musicState ? 'run' : 'pau'" /></div>
        <div class="lyrics" v-if="lyric" ref="lyrics">
          <p v-for="(item, index) in lyric" :key="'' + index" :class="item.time < musicCurrent && musicCurrent < lyric[index + 1].time ? 'current' : ''">
            {{ item.txt }}
          </p>
        </div>
      </div>

      <div class="comment" v-if="comments.all">
        <h3>全部评论({{ comments.total }})</h3>
        <p v-for="item in comments.hot" :key="item.content">{{ item.content }}</p>
      </div>
    </div>
  </div>
</template>

<script>
import { getSongs } from '../../request/api'
import dayjs from 'dayjs'
import duration from 'dayjs/plugin/duration'
dayjs.extend(duration)

import { mapActions, mapState, mapMutations } from 'vuex'

export default {
  name: 'MusicPlay',
  data() {
    return {
      status: true, //播放状态
      progress: 0, //进度
      id: '', //歌曲id
      url: '', //歌曲url
      deail: {}, //歌曲详细信息
      lyric: '', //歌词
      comments: {
        //评论
        all: [],
        hot: [],
        total: 0,
        pageSize: 20,
        pageNumber: 1,
      },
    }
  },

  created() {
    const { id, list } = this.$route.params
    this.id = id

    this.setMusicCurrentIdAction({ currentId: list ? list : id })

    //获取歌曲信息
    getSongs.deail({ ids: id }).then(res => {
      if (res.code == 200) {
        this.deail = res.songs[0]
        this.setmusicDeail(this.deail)
      }
    })

    //获取歌词
    getSongs.getLyric({ id }).then(res => {
      
      const lyric = res.lrc.lyric.split('\n')
      const lyr = []
      lyric.forEach(item => {
        lyr.push({
          time: dayjs
            .duration({
              m: item.substring(1, 3),
              s: item.substring(4, 6),
              ms: item.substring(7, 10),
            })
            .asSeconds(),
          txt: item.substring(11),
        })
      })

      const l = []

      lyr.forEach(item => {
        if (item.txt) {
          l.push(item)
        }
      })

      this.lyric = l
    })

    //获取评论
    getSongs.getComment({ id, limit: this.comments.pageSize, offset: (this.comments.pageNumber - 1) * this.comments.pageSize }).then(res => {
      if (res.code == 200) {
        this.comments.all = res.comments
        this.comments.hot = res.hotComments
        this.comments.total = res.total
      }
    })
  },

  watch: {
    musicCurrentId() {},
  },

  computed: {
    ...mapState({
      musicTotal(state) {
        return state.music.musicTotal
      },
      musicCurrent(state) {
        this.currentLyric(state.music.musicCurrent)
        return state.music.musicCurrent
      },

      musicState(state) {
        const current = state.music.musicState
        return current
      },

      musicCurrentId(state) {
        const id = state.music.musicCurrentId

        if (id && id != this.id) {
          this.id = id

          //获取歌曲信息
          getSongs.deail({ ids: id }).then(res => {
            if (res.code == 200) {
              this.deail = res.songs[0]
              this.setmusicDeail(this.deail)
            }
          })

          //获取歌词
          getSongs.getLyric({ id: id }).then(res => {
            const lyric = res.lrc.lyric.split('\n')
            const lyr = []
            lyric.forEach(item => {
              lyr.push({
                time: dayjs
                  .duration({
                    m: item.substring(1, 3),
                    s: item.substring(4, 6),
                    ms: item.substring(7, 10),
                  })
                  .asSeconds(),
                txt: item.substring(11),
              })
            })

            const l = []

            lyr.forEach(item => {
              if (item.txt) {
                l.push(item)
              }
            })

            this.lyric = l
          })

          //获取评论
          getSongs.getComment({ id: id, limit: this.comments.pageSize, offset: (this.comments.pageNumber - 1) * this.comments.pageSize }).then(res => {
            if (res.code == 200) {
              this.comments.all = res.comments
              this.comments.hot = res.hotComments
              this.comments.total = res.total
            }
          })
        }
        return id
      },
    }),
  },

  methods: {
    ...mapActions('music', ['setUrlListAction', 'setMusicCurrentIdAction']),

    ...mapMutations('music', ['setmusicDeail']),

    currentLyric(current) {
      let activity = this.lyric.findIndex(item => {
        return item.time > current
      })

      if (this.$refs.lyrics) {
        this.$refs.lyrics.scrollTop = activity * 48 - 100
      }
    },
  },
}
</script>

<style lang="less" scoped>
.play-con {
  width: 100%;
  height: calc(100vh - 80px);
  overflow: auto;
  background-color: #fff;

  &::-webkit-scrollbar {
    display: none;
  }

  .songInfo {
    width: 1200px;
    margin: auto;

    .title {
      font-size: 22px;
      font-weight: 700;
      line-height: 2;
      padding-top: 20px;
      text-align: center;
    }

    .artists {
      font-size: 14px;
      text-align: center;
      color: #666;
    }

    .main {
      display: flex;
      justify-content: space-between;
      height: 400px;
      padding: 0 50px;

      .cover {
        width: 50%;
        text-align: center;
        line-height: 400px;
        img {
          vertical-align: middle;
          width: 200px;
          height: 200px;
          border-radius: 50%;
          animation: rouate 5s linear infinite;
        }

        .run {
          animation-play-state: running;
        }

        .pau {
          animation-play-state: paused;
        }
      }

      @keyframes rouate {
        0% {
          transform: rotate(0);
        }
        100% {
          transform: rotate(360deg);
        }
      }

      .lyrics {
        padding-top: 20px;
        flex: 1;
        text-align: center;
        line-height: 2;
        height: 400px;
        overflow: auto;
        font-size: 16px;

        .current {
          color: #f00;
          // top: 20px;
          font-size: 1.3em;
        }

        &::-webkit-scrollbar {
          display: none;
        }
      }
    }

    .comment {
      padding-top: 20px;
      font-size: 14px;
      line-height: 2;
      h3 {
        font-size: 16px;
      }
    }
  }

  .control {
    height: 60px;
    background-color: #111;
    color: #fff;
    position: fixed;
    bottom: 0;
    width: 100%;

    .progress {
      height: 2px;
      .progress-bar {
        height: 2px;
        width: 100%;
        .inner {
          transition: all 100ms;
          position: relative;

          background-color: #f00;
          height: 2px;

          &::after {
            content: '';
            position: absolute;
            right: 0;
            width: 2px;
            height: 2px;
            border-radius: 50%;
            background-color: #f00;
            box-shadow: 0 0 5px 5px rgba(255, 0, 0, 0.5);
          }
        }
      }
    }

    .cut {
      display: flex;
      justify-content: center;
      font-size: 36px;
      line-height: 58px;

      .btn {
        margin: 0 15px;

        cursor: pointer;
      }

      .time {
        font-size: 14px;
        position: absolute;
        transform: translateX(200px);
      }
    }
  }
}
</style>
